<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<el-button type="primary" plain icon="el-icon-refresh" @click="tableRefresh(true)"></el-button>
				<el-button type="primary" @click="addGoods">新增</el-button>
			</div>
			<div class="right-panel">
				<div class="right-panel-search">
					<el-form inline v-model="search" label-position="right">
						<el-form-item label="分类">
							<el-cascader
								v-model="search.category_id"
								:options="shopCategorys"
								:props="{
										value: 'id',
										label: 'cat_name',
										children: 'children',
										emitPath: false,
										checkStrictly: true
									}"
								clearable
							/>
						</el-form-item>
						<el-form-item label="关键词">
							<el-input v-model="search.keyWord" placeholder="请输入名称、标题等关键词" clearable></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTableGdshop ref="table" tableName="goodsTable" :apiObj="apiObj" stripe remoteSort remoteFilter
						   :params="search" :column="tableColumn">

				<template #goods_info="scope">
					<goods-info-item :row="scope.row" :baseUrl="baseUrl" />
				</template>
				<template #price="scope">
					<div class="goods-price-box hover-btn">
						<div class="goods-price">
							<div>{{ $TOOL.get10KMoneyByMinute(scope.row.min_price) }}</div>
							<div v-show="scope.row.min_price != scope.row.max_price">
								{{ $TOOL.get10KMoneyByMinute(scope.row.max_price) }}
							</div>
						</div>
					</div>
				</template>
				<template #stock="scope">
					<div class="goods-stock-box hover-btn">
						<div class="goods-stock">
							<div>{{ scope.row.stock }}</div>
						</div>
					</div>
				</template>
				<template #level_info="scope">
					<div class="level-info-item">
						<div>
							店内(自购)佣金比例
						</div>
						<div>
							{{ scope.row.one_rate/1000 }}%
						</div>
					</div>
					<div class="level-info-item">
						<div>
							上级佣金比例
						</div>
						<div>
							{{ scope.row.two_rate/1000 }}%
						</div>
					</div>
					<div class="level-info-item">
						<div>
							上上级佣金比例
						</div>
						<div>
							{{ scope.row.three_rate/1000 }}%
						</div>
					</div>
				</template>

				<template #fg_status="scope">
					<el-tooltip effect="dark" content="点击切换状态" placement="left">
						<el-button
							type="success"
							plain
							v-if="scope.row.fg_status == 1"
							@click="setStatus(scope.row)"
						>启用</el-button
						>
						<el-button type="warning" plain v-else @click="setStatus(scope.row)"
						>禁用</el-button
						>
					</el-tooltip>
				</template>

				<el-table-column type="selection" width="40" align="center" fixed></el-table-column>
				<el-table-column label="操作" fixed="right" align="center" width="100">
					<template #default="scope">
						<div>
							<el-button
								type="text"
								size="mini"
								@click="editGoods(scope.row.fg_id)"
							>编辑佣金比例</el-button
							>
						</div>
						<div>
							<el-button type="text" size="mini" @click="delGoods(scope.row)"
							>退出分销商品</el-button
							>
						</div>
					</template>
				</el-table-column>
			</scTableGdshop>
		</el-main>

		<edit ref="edit" />
	</el-container>
</template>

<script>
import edit from "./edit.vue"
export default {
	name: "fenxiao-goods",
	components: {
		edit
	},
	data() {
		return {
			shopCategorys: [],
			baseUrl: '',
			search: {
				category_id: 0,
				keyWord: '',
			},
			tableColumn: [
				{
					prop: "goods_info",
					label: "商品",
					align: "left"
				},
				{
					prop: "price",
					label: "价格",
					width: 90
				},
				{
					prop: "stock",
					label: "库存",
					width: 90
				},
				{
					prop: "sales",
					label: "销量",
					width: 80
				},
				{
					prop: "level_info",
					label: "分销佣金比例",
					width: 180
				},
				{
					prop: "fg_status",
					label: "分销状态",
					width: 90
				},
			],
			apiObj: this.$API.fenxiao.goods,

		}
	},
	mounted() {
		this.getBaseUrl();
		this.getShopCategorys();
	},
	methods: {
		async getBaseUrl() {
			this.baseUrl = await this.$TOOL.getBaseUrl(this.$API)
		},
		async getShopCategorys() {
			let res = await this.$API.shop.category.list();
			if (res.code === 0) {
				this.shopCategorys = this.$TOOL.deepTree(res.data, 'parent_id');
			}
		},
		tableRefresh(isClaer = false) {
			if (isClaer === true) {
				this.search.keyWord = '';
			}
			this.$refs.table.refresh();
		},
		upsearch() {
			this.$refs.table.refresh();
		},
		setStatus(_item) {
			this.$confirm("此操作将切换当前商品的分销状态, 是否继续?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			})
				.then(() => {
					this.$API.fenxiao.goods
						.changeStatus({ ids: [_item.fg_id] })
						.then((res) => {
							if (res.code === 0) {
								this.$message({
									type: "success",
									message: "切换成功"
								});
								_item.fg_status = !_item.fg_status;
							}
							else {
								this.$message.error(res.message)
							}
						})
				})
				.catch(() => {
				});
		},
		addGoods() {
			this.$refs.edit.open()
		},
		editGoods(id) {
			this.$refs.edit.open('edit', id);
		},
		delGoods(_row) {
			this.$confirm("商品退出分销《" + _row.goods_name + "》, 是否继续?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			})
				.then(() => {
					// 确认
					this.$API.fenxiao.goods.delete({ ids: [_row.fg_id] }).then((res) => {
						if (res.code === 0) {
							this.tableRefresh();
						}
						else {
							this.$message.error(res.message)
						}
					});
				})
				.catch(() => {
					// 取消
				});
		}
	},
}
</script>

<style lang="scss" scoped>
.level-info-item{
	display: flex;
	justify-content: space-between;
}
</style>
